<template>
  <div class="overview-cont">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" class="el_col">
        <div class="chart-wrapper">
          <div class="divUl">
            <span class="countspan">售房流程</span>
            <div class="titleDiv">
              {{ detailData.address }} | {{ detailData.saleNo }}
              <span>[{{ salesStatusOptions[detailData.status] }}]</span>
            </div>
            <div class="flex-row jus two">
              <p class="count_p" @click="goBack">返回</p>
              <p
                v-if="detailData.status !== 1"
                class="count_pd"
                @click="objMo.show = true"
              >
                中止流程
              </p>
            </div>
            <div class="inputTop">
              <varcla-tab
                :table-data="saleArr"
                :truth-step="detailData.step - 1"
                :active="active"
                @changeActive="(index) => (active = index)"
              />
              <!---->
              <!-- <div>{{ detailData.step - 1 }} {{ active }}</div> -->
              <div class="formdiv">
                <Sales1
                  v-if="active == 0"
                  :id="id"
                  :is-edit="detailData.step - 1 != active"
                  @jump="jump"
                  @next="next"
                />
                <Sales2
                  v-if="active == 1"
                  :id="id"
                  :is-edit="detailData.step - 1 != active"
                  @jump="jump"
                  @next="next"
                />
                <Sales3
                  v-if="active == 2"
                  :id="id"
                  :is-edit="detailData.step - 1 != active"
                  @jump="jump"
                  @next="next"
                />
                <Sales4
                  v-if="active == 3"
                  :id="id"
                  :is-edit="detailData.step - 1 != active"
                  @jump="jump"
                  @next="next"
                />
                <Sales5
                  v-if="active == 4"
                  :id="id"
                  :is-edit="detailData.step - 1 != active"
                  @jump="jump"
                  @next="next"
                />
                <Sales6
                  v-if="active == 5"
                  :id="id"
                  :is-edit="detailData.step - 1 != active"
                  @jump="jump"
                  @next="next"
                />
                <Sales7
                  v-if="active == 6"
                  :id="id"
                  :is-edit="detailData.step - 1 != active"
                  @jump="jump"
                  @next="next"
                />
                <Sales8
                  v-if="active == 7"
                  :id="id"
                  :is-edit="detailData.step - 1 != active"
                  @jump="jump"
                  @next="next"
                />
                <Sales9
                  v-if="active == 8"
                  :id="id"
                  :is-edit="detailData.step - 1 != active"
                  @jump="jump"
                  @next="next"
                />
                <Sales10
                  v-if="active == 9"
                  :id="id"
                  :is-edit="detailData.step - 1 != active"
                  @jump="jump"
                  @next="next"
                />
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--跳过-->
    <myModal :obj="objFour" @save="confirmJump">
      <div class="mpdalBody">
        <el-input
          v-model="jumpData.jumpNote"
          type="textarea"
          placeholder="请输入内容"
          maxlength="200"
          show-word-limit
        />
      </div>
    </myModal>
    <myModal :obj="objMo" @close="objMo.show = false" @save="confirmDel">
      <div class="mpdalBody">
        <p>确认终止？</p>
      </div>
    </myModal>
  </div>
</template>

<script>
import VarclaTab from '../../lease/components/varclaTab'
import myModal from '@/components/Modal'
import { saleDetail, saleDel, jump, edit } from '@/api/sale'
import { salesStatusOptions } from '@/utils/consts'
import Sales1 from './sales/sales1.vue'
import Sales2 from './sales/sales2.vue'
import Sales3 from './sales/sales3.vue'
import Sales4 from './sales/sales4.vue'
import Sales5 from './sales/sales5.vue'
import Sales6 from './sales/sales6.vue'
import Sales7 from './sales/sales7.vue'
import Sales8 from './sales/sales8.vue'
import Sales9 from './sales/sales9.vue'
import Sales10 from './sales/sales10.vue'
export default {
  components: {
    VarclaTab,
    myModal,
    Sales1,
    Sales2,
    Sales3,
    Sales4,
    Sales5,
    Sales6,
    Sales7,
    Sales8,
    Sales9,
    Sales10
  },
  data() {
    return {
      salesStatusOptions,
      detailData: {},
      id: '',
      jumpData: {
        jumpNote: '',
        jumpStep: '',
        id: ''
      },
      objMo: {
        show: false,
        title: null,
        width: '500px'
      },
      objFour: {
        show: false,
        title: '请填写跳过理由',
        width: '647px'
      },
      show: false,
      textarea: '',
      checkList: ['1', '2'],
      active: 0,
      saleArr: [
        { id: 0, name: '待确认费用' },
        { id: 1, name: '待支付费用' },
        { id: 2, name: '待预约拍照' },
        { id: 3, name: '待拍摄' },
        { id: 4, name: '待广告挂牌' },
        { id: 5, name: '待买家出价' },
        { id: 6, name: '待上传合同' },
        { id: 7, name: '待买家付款' },
        { id: 8, name: '待交割' },
        { id: 9, name: '出售成功' }
      ],
      sizeForm: {},
      stepData: {}
    }
  },
  watch: {},
  async created() {
    this.id = this.$route.query.id
    await this.getDetailInfo()
    this.jumpData.id = this.id
    this.active = this.detailData.step - 1
  },
  methods: {
    async getDetailInfo() {
      try {
        var res = await saleDetail(this.$route.query.id)
        this.detailData = res.data
      } catch (error) {
        console.log(error)
      }
    },
    async confirmJump() {
      this.jumpData.jumpStep = this.active + 1
      this.jumpData.stepName = this.stepData.stepName
      var jumpRes = await jump({...this.jumpData,...this.stepData})
      if (jumpRes.code === 200) {
        this.jumpData.jumpNote = ''
        this.active++
        this.objFour.show = false
      }
      // await edit(this.stepData)
      this.getDetailInfo()
    },
    async confirmDel() {
      var delRes = await saleDel(this.id)
      if (delRes.code === 200) {
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
      }
      this.objMo.show = false
      this.goBack()
    },

    goBack() {
      if (this.$route.query.isDetail) {
        this.$router.go(-1)
      } else {
        this.$router.push('/house/page')
      }
    },
    jump(stepData) {
      this.objFour.show = true
      this.stepData = stepData
    },
    next(val) {
      if (val !== undefined) {
        this.active = val
      } else {
        this.active++
      }
      this.getDetailInfo()
    }
  }
}
</script>
<style lang="scss" scoped>
.el_col {
  // background-color: #eeeeee;
  margin-bottom: 20px;
}
.overview-cont {
  // padding: 0 !important;
  margin: 0;
  min-height: calc(100vh - 160px);
  background-color: #eeeeee;
}
.titleDiv {
  background: #5ac6b7;
  padding-left: 20px;
  color: #fff;
  height: 60px;
  line-height: 60px;
  font-weight: 900;
}
.divUl {
  margin: 0px auto 0 auto;
}
.countFsColor {
  cursor: pointer;
}
.countspan {
  width: 100%;
  height: 50px;
  color: #5ac6b7;
  display: block;
  padding: 20px 0 0 5px;
  // background: #eeeeee;
}
.inputTop {
  display: flex;
  justify-content: space-between;
}
.formdiv {
  width: calc(100% - 200px);
  // height: 500px;
}
.mpdalBody p {
  padding: 20px;
  text-align: center;
  font-size: 20px;
}
.count_p {
  padding-left: 5px;
  color: #5ac6b7;
  cursor: pointer;
}
.count_pd {
  padding-right: 7px;
  color: #5ac6b7;
  cursor: pointer;
}
</style>
